<template>
  <el-container>
    <el-main>
      <div class="tab-home">
        <div class="title">
          <span style="font-size: 40px; margin-top: 20px; font-weight: bold">
            Welcome to xClick-Super Right-Click Menu Assistant
          </span>
          <p style="font-size: 20px">
            A simple and easy-to-use Super Right-Click Menu Assistant.
          </p>
        </div>
        <!-- 多图片展示 -->
        <div class="carousel-container">
          <el-carousel :interval="4000" height="550px" arrow="always">
            <el-carousel-item>
              <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->


              <el-image
                  :src="require('../assets/images/1.png')"
                  :fit="'cover'"
                  alt="carousel"
              />
            </el-carousel-item>
            <el-carousel-item>
              <el-image
                  :src="require('../assets/images/2.png')"
                  :fit="'cover'"
                  alt="carousel"
                  />
            </el-carousel-item>
            <el-carousel-item>
              <el-image
                  :src="require('../assets/images/3.png')"
                  :fit="'cover'"
                  alt="carousel"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- The clipboard as it should be -->

        <div class="clipboard">
          <div class="clipboard-title">
            <h2 style="font-size: 40px">The xclick as it should be</h2>
          </div>
          <div style="display: flex; justify-content: center; margin-top: -20px">
            <p class="clipboard-content">
              xclick is a right-click menu enhancement tool designed specifically for Mac computers. It deeply customizes and extends the default right-click functionality of the system to
              offer users a series of convenient and efficient operation options. Here's an overview of some primary features of the 'Super Right-Click' software based on historical
              information:
              <br><br>
              1. **New File Creation**: Users can directly create files in various formats within the current directory using the right-click menu, including but not limited to XT, RTF, XML,
              Microsoft Office suite (Word, Excel, PowerPoint), WPS Office suite (WPS Writer, WPS Spreadsheets, WPS Presentation), Apple iWork suite (Pages, Numbers, Keynote), as well as
              professional formats like Ai, PSD, and Markdown.
              <br><br>
              2. **Copy/Move Files**: Recognizing that macOS does not natively support cut operations, Super Right-Click provides copy and move file functions similar to those found in
              Windows systems, simplifying the process of transferring files between different folders.
              <br><br>
              3. **Customize File/Folder Icons**: Users are allowed to change the default icons of files or folders, personalizing their desktop and file management system.
              <br><br>
              4. **One-Click Access to Path**: Integrates terminal commands into the right-click menu, enabling users to quickly open the current path in the terminal.
              <br><br>
              5. **Shortcut to Common Directories**: Users can set up shortcuts to frequently used directory paths, making them directly accessible through the right-click menu, thereby
              boosting productivity.
              <br><br>
              6. **Cut and Paste Files**: Implements cut and paste operations similar to those in Windows systems, enhancing the flexibility of file management.
              <br><br>
              7. **Copy Path**: Easily retrieve and copy the full path of the current file or folder.
              <br><br>
              8. **Hide/Show Files**: Quickly toggle the visibility status of files or folders.
              <br><br>
              9. **Securely Delete Files**: Provides a secure and thorough deletion option for files, differing from the system's recycle bin mechanism.
              <br><br>
              This software aims to elevate the everyday file management experience for Mac users by enriching the right-click menu functions, significantly reducing repetitive tasks and
              increasing convenience in both work and daily life.
            </p>

          </div>
        </div>
      </div>
      <div
          id="tab-tutorial"
          class="tab-tutorial"
          ref="tourialDiv"
      >

      </div>
    </el-main>
    <el-footer class="footer">

      <div class="copyright">
        <div>
          Contact Us Email：<a :href="'mailto:fredxsc@foxmail.com'"  class="email-link">fredxsc@foxmail.com</a>
        </div>

        Copyright © 2024 Orange Team. All rights reserved.
      </div>
    </el-footer>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
      <p>If you have any questions or suggestions, please contact us.</p>
      <p>email: fredxsc@foxmail.com</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Ok,I got it!
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script >



</script>

<style scoped>
/* 水平布局 */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-grow {
  flex-grow: 1;
}

.tab-home {
  margin-top: -5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-tutorial {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 防止 iframe 溢出 */
}

.carousel-container {
  width: 70%;
}

.clipboard-content {
  width: 70%;
  text-align: left;
}

.right-align {
  float: right !important;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.copyright {
  text-align: center;
  margin-top: 15px;
}
</style>
